import { Table, Pagination, message } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom';
import { rechargelist } from '@/service';
import { useTranslation } from 'react-i18next';

export default () => {
    const [messageApi, contextHolder] = message.useMessage();
    const { t, i18n } = useTranslation();
    const initState = () => ({
        total: '',
        pageSize: 10,
        pageNo: 1,
        recordList: [],
        loading: false,
        accountBalance: 0,
        accountTotal: 0
    }),
        navigate = useNavigate(),
        [state, setState] = useState(initState);
    const columns = [
        {
            title: t('menu.rechargeList.table.rechargetime'),
            dataIndex: 'createTime',

        },
        {
            title: t('menu.rechargeList.table.rechargeamount'),
            dataIndex: 'money',
            render: (text) => `$${text}`,
        },
        {
            title: t('menu.rechargeList.table.serialnumber'),
            dataIndex: 'code',
        },
        {
            title: t('menu.rechargeList.table.platform'),
            dataIndex: 'type',
            render: (type) => {
                return type == 1 ? 'PayPal' : ''
            }
        },
        {
            title: t('menu.rechargeList.table.status'),
            dataIndex: 'state',
            width: 250,
            render: (state) => {
                switch (state) {
                    case 0:
                        return t('menu.rechargeList.table.status.Payment');
                    case 1:
                        return t('menu.rechargeList.table.status.successful');
                    case 2:
                        return t('menu.rechargeList.table.status.Failed');
                    case 3:
                        return t('menu.rechargeList.table.status.Cancel');
                    case 4:
                        return t('menu.rechargeList.table.status.createFailed');
                    default:
                        return t('menu.rechargeList.table.status.initial');
                }
            },
        },
    ];
    const getRechargeFn = async () => {
        let params = {
            pageNo: state.pageNo,
            pageSize: state.pageSize
        }
        try {
            setState(prevState => ({ ...prevState, loading: true }));
            const res = await rechargelist(params);
            const { code, message, data } = res || {};
            if (code === 0) {
                setState(o => ({
                    ...o,
                    recordList: data?.userRechargeHisVos?.records || [],
                    total: data?.userRechargeHisVos?.total || 0,
                    loading: false,
                    accountBalance: data?.accountBalance || 0,
                    accountTotal: data?.accountTotal || 0,
                }));
            } else {
                messageApi.open({
                    type: 'error',
                    content: message,
                });
                setState(prevState => ({ ...prevState, loading: false }));
            }
        } catch (error) {
            if (error?.msg) {
                messageApi.open({
                    type: 'error',
                    content: error?.msg,
                });
            }
            setState(prevState => ({ ...prevState, loading: false }));
        }
    };
    const handlePageChange = (page) => {
        setState(prevParams => ({ ...prevParams, pageNo: page }));
    };
    const handlePageSizeChange = (pageNo, pageSize) => {
        setState(prevParams => ({ ...prevParams, pageNo, pageSize }));
    };
    useEffect(() => {
        getRechargeFn();
    }, [state.pageNo, state.pageSize, i18n.language]);
    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <div className={styles.top}>
                    <div className='custom-title'>{t('menu.rechargeList.title')}</div>
                    <div className={styles.num}>
                        <div className={styles.balanceBox}>{t('menu.rechargeList.accountbalance')}<span className={styles.balanceValue}>${state?.accountBalance}</span></div>
                        <div className={styles.rechargeBox}>{t('menu.rechargeList.istoricalRecharge')}<span className={styles.rechargeValue}>${state?.accountTotal}</span></div>
                    </div>
                </div>
                <div className={styles.bottom}>
                    <Table loading={state.loading} rowKey={'id'} className='custom-table' pagination={false} columns={columns} dataSource={state.recordList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => `${t('common.pagination.totalText')} ${totalNum} ${t('common.pagination.itemText')}`}
                            align="center"
                            current={state?.pageNo}
                            defaultPageSize={state?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>

                </div>
            </div>
            {contextHolder}
        </div>
    );
}